<template>
  <div class="container">
    <!-- 顶部导航信息栏 -->
    <TopBar></TopBar>
    <!-- 搜索栏 -->
    <SearchBar></SearchBar>

    <!--轮播图-->
    <div class="carousel-box">
      <div class="carousel-images">
        <img
            v-for="(image, index) in images"
            :key="index"
            class="carousel-image"
            :src="image"
            :class="{ active: currentImageIndex === index }"
            alt="">
      </div>

      <!-- 左右切换按钮 -->
      <button class="carousel-prev" @click="prevImage">
        <img class="image-btn" src="../assets/images/left.png" alt="">
      </button>
      <button class="carousel-next" @click="nextImage">
        <img class="image-btn" src="../assets/images/right.png" alt="">
      </button>

      <!-- 底部的指示点 -->
      <div class="carousel-dots">
        <div
            v-for="(image, index) in images"
            :key="index"
            :class="{'dot': true, 'active-dot': currentImageIndex === index}"
            @click="goToImage(index)">
        </div>
      </div>
    </div>


    <!-- 个人信息框 -->
    <div class="info-box">
      <router-link :to="PersonData.name === '登录' ? '/login' : '/user-center'">
        <div class="avatar-box">
          <img class="avatar" :src="PersonData.avatar" alt="">
        </div>
        <div class="name">{{PersonData.name}}</div>
      </router-link>

      <!--性别-->
      <img v-show="PersonData.gender !== null" class="gender" :src="isMale(PersonData.gender)" alt="">
      <!--简介-->
      <router-link :to="PersonData.name === '登录' ? '/login' : '/user-center'">
        <div class="introduction">
          <span v-show="PersonData.identity !== 3">我是{{PersonData.identity ? '社会人士':'在校学生'}}，</span>
          个人信息完整度{{PersonData.ratio}}%
        </div>
      </router-link>

      <!--发单数量、完成单数、信用评分-->
      <div class="statistics-box">
        <div class="release">
          <div class="number">{{PersonData.deliverCount}}</div>
          发布单数
        </div>
        <div class="finish">
          <div class="number">{{PersonData.completedCount}}</div>
          完成单数
        </div>
        <div class="credit">
          <div class="number">{{PersonData.credit}}</div>
          信用评分
        </div>
      </div>
      <div class="line"></div>
      <div class="detail-box">
        <div class="record">
          <img src="../assets/images/record.png" alt="">
          服务记录
        </div>
        <div class="behavior">
          <img src="../assets/images/behavior.png" alt="">
          个人动态
        </div>
        <div class="message">
          <img src="../assets/images/message.png" alt="">
          消息通知
        </div>
        <div class="setting">
          <img src="../assets/images/setting.png" alt="">
          个性设置
        </div>
      </div>
      <router-link :to="PersonData.name === '登录' ? '/login' : '/user-center'">
        <button>完善信息
          <img src="../assets/images/pointRight.png" alt="">
        </button>
      </router-link>
    </div>

    <!-- 推荐匹配 -->
    <div class="recommend-title">推荐匹配</div>
    <div class="grid-box">
      <div class="info" v-for="(matchItem) in MatchInfoList" :key="matchItem.id" @click="navigateToTaskDetail(matchItem)">
        <div class="decorate"></div>
        <div class="box1">
          <div class="title">{{matchItem.name}}</div>
          <div class="zone" v-show="matchItem.type===0">校园专区</div>
        </div>
        <div class="box2">
          <div class="money">{{matchItem.payment}}元/{{matchItem.unit}}</div>
          <div class="money-discuss" v-show="matchItem.isPaymentNegotiable==='true'">议</div>
        </div>
        <div class="decorate2"></div>
        <div class="person-name">{{matchItem.senderNameShow}}</div>
        <img class="person-avatar" :src="matchItem.avatarUrl" alt="">
        <img class="decorate3" src="../assets/images/address2.png" alt="">
        <div class="person-city">{{matchItem.region}}</div>
        <div class="tag-box">
          <div class="tag" v-for="(item) in matchItem.tags" :key="item.id">{{ item }}</div>
        </div>
      </div>
    </div>
    <router-link :to="PersonData.identity ? '/social-zone' : '/school-zone'">
      <button class="more-btn">查看更多</button>
    </router-link>


    <!-- 推荐组队 -->
    <div class="recommend-title" style="top: 143.05vh;">推荐组队</div>
    <div class="grid-box" style="top: 150.74vh;">
      <div class="info" v-for="(teamItem) in TeamInfoList" :key="teamItem.id" @click="navigateToTaskDetail(teamItem)">
        <div class="decorate"></div>
        <div class="box1">
          <div class="title">{{teamItem.name}}</div>
          <div class="zone" v-show="teamItem.type===0">校园专区</div>
        </div>
        <div class="box2">
          <div class="money">{{teamItem.payment}}元/{{teamItem.unit}}</div>
          <div class="money-discuss" v-show="teamItem.isPaymentNegotiable==='true'">议</div>
        </div>
        <div class="decorate2"></div>
        <div class="person-name">{{teamItem.senderNameShow}}</div>
        <img class="person-avatar" :src="teamItem.avatarUrl" alt="">
        <img class="decorate3" src="../assets/images/address2.png" alt="">
        <div class="person-city">{{teamItem.region}}</div>
        <div class="tag-box">
          <div class="tag" v-for="(item) in teamItem.tags" :key="item.id">{{ item }}</div>
        </div>
      </div>
    </div>
    <router-link :to="PersonData.identity ? '/social-zone' : '/school-zone'">
      <button class="more-btn" style="top: 207.41vh">查看更多</button>
    </router-link>


    <!-- 底部导航信息栏 -->
    <BottomBar></BottomBar>

  </div>
</template>

<script>
import TopBar from "@/components/TopBar.vue";
import BottomBar from "@/components/BottomBar.vue";
import {computed, onBeforeUnmount, onMounted, ref, watchEffect} from "vue";
import SearchBar from "@/components/SearchBar.vue";
import {useStore} from "vuex";
import {useHomeRecommendTasks} from "@/api/getHomeRecommendTasks";
import {useHomeGroupTasks} from "@/api/getHomeGroupTasks";
import {useRouter} from "vue-router";

export default {
  name: "HomePage",  // 确保组件名一致
  components: {
    SearchBar,
    TopBar,
    BottomBar
  },
  setup() {

    const store = useStore(); // 获取 Vuex 实例
    const userInfo = computed(() => store.getters.getUserInfo || {}); // 确保返回对象，避免 undefined

    // 本地数据，初始值为空，动态同步 Vuex 数据
    const PersonData = ref({
      name: "",          // 默认值为空字符串
      gender: "",        // 默认值为空字符串
      isNameShow: false, // 默认值为 false
      avatar: "",        // 默认值为空字符串
      identity: 0,       // 默认值为 0
      city: "",          // 默认值为空字符串
      birthdate: "",     // 默认值为空字符串
      school: "",        // 默认值为空字符串
      graduateYear: "",  // 默认值为空字符串
      vxNumber: "",      // 默认值为空字符串
      intro: "",         // 默认值为空字符串
      resume: "",        // 默认值为空字符串
      resumeName: "",
      ratio: 0,          // 默认值为 0
      deliverCount: 0,
      completedCount: 0,
      credit: 80,
      phoneNumber: "",
      ifOnline: 0,
    });
    // 动态同步 Vuex 的 userInfo 数据到 PersonData
    watchEffect(() => {
      PersonData.value = {
        name: userInfo.value?.name || "登录",
        gender: userInfo.value?.gender || null,
        isNameShow: PersonData.value.isNameShow || false,
        avatar: userInfo.value?.avatar || "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        identity: userInfo.value?.identity || 3,
        city: userInfo.value?.city || "杭州",
        birthdate: userInfo.value?.birthdate || "",
        school: userInfo.value?.school || "",
        graduateYear: userInfo.value?.graduateYear || "",
        vxNumber: userInfo.value?.vxNumber || "",
        intro: userInfo.value?.intro || "",
        resume: userInfo.value?.resume || "",
        resumeName: userInfo.value?.resumeName || "",
        ratio: userInfo.value?.ratio || 0,
        deliverCount: userInfo.value?.deliverCount || 0,
        completedCount: userInfo.value?.completedCount || 0,
        credit: userInfo.value?.credit || 80,
        phoneNumber: userInfo.value?.phoneNumber || "",
        ifOnline: userInfo.value?.ifOnline || 0,
      };
      console.log('首页',userInfo.value)
    });

    const MatchInfoList = ref([
     /* {
        id:"1",
        title: "社区媒体内容协助发布",
        zone: "校园专区",
        money: "50元/天",
        moneyDiscuss:"true",
        personName: "罗小昔",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "浙江-杭州",
        tagList: [
          { id: "1", content: "文案撰写" },
          { id: "2", content: "图像编辑" },
        ]
      },
      {
        id:"2",
        title: "产品设计师招聘",
        zone: "职场专区",
        money: "100元/天",
        moneyDiscuss:"true",
        personName: "张晓明",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "上海-浦东",
        tagList: [
          { id: "1", content: "产品设计" },
          { id: "2", content: "用户体验" },
          { id: "3", content: "界面设计" },
          { id: "4", content: "创意思维" }
        ]
      },
      {
        id:"3",
        title: "市场营销专家",
        zone: "职场专区",
        money: "80元/天",
        moneyDiscuss:"false",
        personName: "李佳璇",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "北京-朝阳",
        tagList: [
          { id: "1", content: "市场分析" },
          { id: "2", content: "策略规划" },
          { id: "3", content: "品牌推广" },
          { id: "4", content: "消费者研究" }
        ]
      },
      {
        id:"4",
        title: "软件开发工程师",
        zone: "IT专区",
        money: "120元/天",
        moneyDiscuss:"false",
        personName: "王子杰",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "广州-天河",
        tagList: [
          { id: "1", content: "Java开发" },
          { id: "2", content: "系统架构" },
          { id: "3", content: "数据库设计" },
          { id: "4", content: "算法优化" }
        ]
      },
      {
        id:"5",
        title: "平面设计师",
        zone: "设计专区",
        money: "90元/天",
        moneyDiscuss:"true",
        personName: "陈琳",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "深圳-福田",
        tagList: [
          { id: "1", content: "平面设计" },
          { id: "2", content: "UI设计" },
          { id: "3", content: "品牌视觉" },
          { id: "4", content: "广告创意" }
        ]
      },
      {
        id:"6",
        title: "内容编辑实习生",
        zone: "校园专区",
        money: "50元/天",
        moneyDiscuss:"true",
        personName: "徐晨",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "南京-鼓楼",
        tagList: [
          { id: "1", content: "文案撰写" },
          { id: "2", content: "内容编辑" },
          { id: "3", content: "社交媒体" },
          { id: "4", content: "短视频制作" }
        ]
      },
      {
        id:"7",
        title: "摄影师招聘",
        zone: "创意专区",
        money: "150元/天",
        moneyDiscuss:"true",
        personName: "赵天宇",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "成都-武侯",
        tagList: [
          { id: "1", content: "摄影技巧" },
          { id: "2", content: "后期制作" },
          { id: "3", content: "婚礼摄影" },
          { id: "4", content: "商业广告" }
        ]
      },
      {
        id:"8",
        title: "网站开发工程师",
        zone: "IT专区",
        money: "110元/天",
        moneyDiscuss:"true",
        personName: "李波",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "杭州-西湖",
        tagList: [
          { id: "1", content: "前端开发" },
          { id: "2", content: "后端开发" },
          { id: "3", content: "数据库管理" },
          { id: "4", content: "Web开发" }
        ]
      },
      {
        id:"9",
        title: "视频制作与剪辑",
        zone: "创意专区",
        money: "100元/天",
        moneyDiscuss:"true",
        personName: "杨柳",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "重庆-渝中",
        tagList: [
          { id: "1", content: "视频拍摄" },
          { id: "2", content: "视频剪辑" },
          { id: "3", content: "特效制作" },
          { id: "4", content: "脚本编写" }
        ]
      }*/
    ]);
    const TeamInfoList = ref([
      {
        id:"1",
        title: "社区媒体内容协助发布",
        zone: "校园专区",
        money: "100元/人/天",
        moneyDiscuss:"true",
        personName: "罗小昔",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "浙江-杭州",
        tagList: [
          { id: "1", content: "文案撰写" },
          { id: "2", content: "图像编辑" },
          { id: "3", content: "创意新颖" },
          { id: "4", content: "每日发布" }
        ]
      },
      {
        id:"2",
        title: "产品设计师招聘",
        zone: "职场专区",
        money: "150元/人/天",
        moneyDiscuss:"true",
        personName: "张晓明",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "上海-浦东",
        tagList: [
          { id: "1", content: "产品设计" },
          { id: "2", content: "用户体验" },
          { id: "3", content: "界面设计" },
          { id: "4", content: "创意思维" }
        ]
      },
      {
        id:"3",
        title: "市场营销专家",
        zone: "职场专区",
        money: "200元/人/天",
        moneyDiscuss:"false",
        personName: "李佳璇",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "北京-朝阳",
        tagList: [
          { id: "1", content: "市场分析" },
          { id: "2", content: "策略规划" },
          { id: "3", content: "品牌推广" },
          { id: "4", content: "消费者研究" }
        ]
      },
      {
        id:"4",
        title: "软件开发工程师",
        zone: "IT专区",
        money: "200元/人/天",
        moneyDiscuss:"false",
        personName: "王子杰",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "广州-天河",
        tagList: [
          { id: "1", content: "Java开发" },
          { id: "2", content: "系统架构" },
          { id: "3", content: "数据库设计" },
          { id: "4", content: "算法优化" }
        ]
      },
      {
        id:"5",
        title: "平面设计师",
        zone: "设计专区",
        money: "90元/天",
        moneyDiscuss:"true",
        personName: "陈琳",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "深圳-福田",
        tagList: [
          { id: "1", content: "平面设计" },
          { id: "2", content: "UI设计" },
          { id: "3", content: "品牌视觉" },
          { id: "4", content: "广告创意" }
        ]
      },
      {
        id:"6",
        title: "内容编辑实习生",
        zone: "校园专区",
        money: "50元/天",
        moneyDiscuss:"true",
        personName: "徐晨",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "南京-鼓楼",
        tagList: [
          { id: "1", content: "文案撰写" },
          { id: "2", content: "内容编辑" },
          { id: "3", content: "社交媒体" },
          { id: "4", content: "短视频制作" }
        ]
      },
      {
        id:"7",
        title: "摄影师招聘",
        zone: "创意专区",
        money: "150元/天",
        moneyDiscuss:"true",
        personName: "赵天宇",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "成都-武侯",
        tagList: [
          { id: "1", content: "摄影技巧" },
          { id: "2", content: "后期制作" },
          { id: "3", content: "婚礼摄影" },
          { id: "4", content: "商业广告" }
        ]
      },
      {
        id:"8",
        title: "网站开发工程师",
        zone: "IT专区",
        money: "110元/天",
        moneyDiscuss:"true",
        personName: "李波",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "杭州-西湖",
        tagList: [
          { id: "1", content: "前端开发" },
          { id: "2", content: "后端开发" },
          { id: "3", content: "数据库管理" },
          { id: "4", content: "Web开发" }
        ]
      },
      {
        id:"9",
        title: "视频制作与剪辑",
        zone: "创意专区",
        money: "100元/天",
        moneyDiscuss:"true",
        personName: "杨柳",
        personAvatar: "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        personCity: "重庆-渝中",
        tagList: [
          { id: "1", content: "视频拍摄" },
          { id: "2", content: "视频剪辑" },
          { id: "3", content: "特效制作" },
          { id: "4", content: "脚本编写" }
        ]
      }
    ]);

    const { handleGetHomeRecommendTasks, isLoading } = useHomeRecommendTasks(MatchInfoList, 0)
    const { handleGetHomeGroupTasks, isLoading1 } = useHomeGroupTasks(TeamInfoList, 1)
    onMounted(() => {
      handleGetHomeRecommendTasks();
      handleGetHomeGroupTasks();
    });
    // 定义响应式的数据
    const currentImageIndex = ref(0);
    const images = ref([
      require('../assets/images/lunbo1.png'),
      require('../assets/images/lunbo2.png'),
      require('../assets/images/lunbo3.png'),
      require('../assets/images/lunbo4.png'),
      require('../assets/images/lunbo5.png')
    ]);
    // 切换到下一张图片
    const nextImage = () => {
      currentImageIndex.value = (currentImageIndex.value + 1) % images.value.length;
    };
    // 切换到上一张图片
    const prevImage = () => {
      currentImageIndex.value = (currentImageIndex.value - 1 + images.value.length) % images.value.length;
    };
    // 跳转到指定的图片
    const goToImage = (index) => {
      currentImageIndex.value = index;
    };
    // 设置定时器每隔3秒切换一次图片
    let imageInterval;
    onMounted(() => {
      imageInterval = setInterval(nextImage, 3000); // 每3秒切换图片
    });
    onBeforeUnmount(() => {
      clearInterval(imageInterval); // 组件销毁时清除定时器
    });

    // 显示性别图标
    const isMale = (gender) => {
      if (gender === "male") {
        return require('../assets/images/male.png');
      } else if (gender === "female") {
        return require('../assets/images/female.png');
      } else {
        return '';
      }
    };

    const router = useRouter();
    // 导航到任务详情页的方法
    const navigateToTaskDetail = (task) => {
      router.push({
        name: 'taskDetailPage',
        query: { task: JSON.stringify(task) } // 将任务数据传递到任务详情页
      });
    };


    return {
      PersonData,
      isMale,
      MatchInfoList,
      TeamInfoList,
      currentImageIndex,
      images,
      nextImage,
      prevImage,
      goToImage,
      handleGetHomeRecommendTasks,
      isLoading,
      handleGetHomeGroupTasks,
      isLoading1,
      navigateToTaskDetail
    };
  },
};
</script>

<style scoped>
.container {
  position: absolute;
  width: 100%;
  height: 244.04vh;
  top: 0;
  left: 0;
  overflow-x: hidden; /* 禁止横向滚动条 */
  overflow-y: hidden;
  background: rgba(242, 244, 245, 1);

}

.carousel-box {
  position: relative;
  left: 10.9375vw;
  top: 22.685vh;
  width: 52.08vw;
  height: 39.72vh;
  border-radius: 1.25vw;
  overflow: hidden;
}
.carousel-images {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;  /* 滑动效果 */
}
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;  /* 初始时图片不可见 */
  position: absolute;  /* 每张图片都堆叠 */
}
.carousel-image.active {
  opacity: 1;  /* 当前图片可见 */
}
.carousel-prev, .carousel-next {
  position: absolute;
  top: 50%;
  width: 3vw;
  height: 3vw;
  line-height: 3vw;
  transform: translateY(-50%);
  background: rgba(32, 32, 32, 0.15);
  border: none;
  cursor: pointer;
  border-radius: 50%;
}
.image-btn{
  width: 0.573vw;
}
.carousel-prev {
  left: 1.3vw;
}
.carousel-next {
  right: 1.3vw;
}
.carousel-dots {
  position: absolute;
  bottom: 2vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dot {
  width: 0.7vw;
  height: 0.7vw;
  top: 50%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 1);
  margin: 0 0.46vw;
  cursor: pointer;
}
.active-dot {
  width: 2.2vw;
  border-radius: 5.2vw;
}

.info-box{
  position: absolute;
  left: 64.58vw;
  top: 22.69vh;
  width: 24.48vw;
  height: 39.72vh;
  border-radius: 1.25vw;
  background-color:  rgba(255, 255, 255, 1);
}
.avatar-box{
  position: absolute;
  left: 2.5vw;
  top: 4.04vh;
  width: 3.5vw;
  height: 3.5vw;
  background-color: #5A82F4;
  border: 3px solid #5A82F4;
  display: flex;
  border-radius: 50%;
}
.avatar{
  position: absolute;
  left: 0;
  right: 0;
  width: 3.5vw;
  height: 3.5vw;
  border-radius: 50%;
}
.name{
  position: absolute;
  left: 7.5vw;
  top: 5vh;
  font-size: 1.0417vw;
  color: rgba(32, 32, 32, 1);
  text-align: left;
  vertical-align: middle;
}
.gender{
  position: absolute;
  left: 11.25vw;
  top: 5.463vh;
  width: 1.0417vw;
  height: 1.0417vw;
}
.introduction{
  position: absolute;
  left: 7.5vw;
  top: 9.1vh;
  display: flex;
  font-size: 0.833vw;
  color: rgba(102, 102, 102, 1);
  text-align: left;
  vertical-align: middle;
}
.statistics-box{
  position: absolute;
  left: 2.5vw;
  top: 14.8vh;
  width: 19.48vw;
  height: 7.40vh;
  font-size: 0.833vw;
  color: #202020;
}
.release{
  position: absolute;
  top: 0;
  left: 0;
  width: 3.8vw;
  height: 7.40vh;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  cursor: pointer;
}
.finish{
  position: absolute;
  top: 0;
  left: 7.84vw;
  width: 3.8vw;
  height: 7.40vh;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  cursor: pointer;
}
.credit{
  position: absolute;
  top: 0;
  right: 0;
  width: 3.8vw;
  height: 7.40vh;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  cursor: pointer;
}
.statistics-box .number{
  position: absolute;
  top: 0;
  height: 4.074vh;
  font-size: 1.5625vw;
  font-weight: 500;
  color: #202020;
  text-align: center;
  vertical-align: middle;
}
.line{
  position: absolute;
  left: 2.5vw;
  top: 24.44vh;
  width: 19.48vw;
  height: 1px;
  background-color: rgba(217, 217, 217, 1);
}
.detail-box{
  position: absolute;
  left: 2.5vw;
  top: 27.5vh;
  width: 19.48vw;
  height: 8.52vh;
  font-size: 0.833vw;
  color: #202020;
}
.detail-box img{
  position: absolute;
  height: 5.55vh;
  top: 0;
}
.record{
  position: absolute;
  left: 0;
  top: 0;
  width: 3.8vw;
  height: 8.52vh;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  cursor: pointer;
}
.behavior{
  position: absolute;
  left: 5.227vw;
  top: 0;
  width: 3.8vw;
  height: 8.52vh;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  cursor: pointer;
}
.message{
  position: absolute;
  top: 0;
  right: 5.227vw;
  width: 3.8vw;
  height: 8.52vh;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  cursor: pointer;
}
.setting{
  position: absolute;
  right: 0;
  top: 0;
  width: 3.8vw;
  height: 8.52vh;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  cursor: pointer;
}
.info-box button{
  position: absolute;
  right: 0;
  top: 0;
  width: 5.89vw;
  height: 4.44vh;
  border-radius: 1.25vw 1.25vw 0 1.25vw;
  background: linear-gradient(221.64deg, rgba(238, 113, 62, 1) 0%, rgba(255, 141, 26, 1) 100%);
  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: 0.833vw;
  cursor: pointer;
}
.info-box button img{
  position: absolute;
  right: 0.52vw;
  top: 1.667vh;
  width: 0.34vw;
}

.recommend-title{
  position: absolute;
  left: 45.83vw;
  top: 68.33vh;
  font-size: 1.667vw;
  font-weight: 700;
  letter-spacing: 0.417vw;
  color: #202020;
  text-align: center;
  vertical-align: top;
}
.grid-box{
  width: 78.125vw;
  height: 53.33vh;
  position: absolute;
  margin: 0 10.9375vw;
  top: 76.02vh;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3列，等分宽度 */
  grid-template-rows: repeat(3, minmax(0, 1fr)); /* 3行，等分高度 */
  /*gap: 3.33vh 3.854vw; !* 设置网格项之间的间距 *!*/
  gap: 3.23vh 3.7983vw; /* 设置网格项之间的间距 */
}
.grid-box .box1{
  position: absolute;
  display: flex;
  flex-direction: row;
  left: 1.25vw;
  top: 1.97vh;
  height: 2.6vh;
  white-space: nowrap;
  width: fit-content;
}
.grid-box .box2{
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  right: 1.25vw;
  top: 1.97vh;
  height: 2.6vh;
  white-space: nowrap;
  width: 7vw;
}
.info{
  position: relative;
  width: 23.49vw;
  height: 15.55vh;
  border-radius: 0 0.833vw 0.833vw 0.833vw;
  background: rgba(255, 255, 255, 1);
  cursor: pointer;
}
.decorate {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.458vw;
  height: 1.94vh;
  background: linear-gradient(136.14deg, rgba(12, 116, 235, 1) 0%, rgba(93, 171, 245, 1) 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%); /* 使用clip-path裁剪成三角形 */
}
.decorate2{
  position: absolute;
  left: 1.25vw;
  top: 10.55vh;
  width: 20.885vw;
  height: 0.01vh;
  background-color: rgba(217, 217, 217, 1);
}
.title{
  position: relative;
  line-height: 2.6vh;
  font-size: 0.9375vw;
  font-weight: 550;
  border-radius: 0.833vw;
  margin-right: 0.833vw;
}
.zone{
  position: relative;
  width: 3.3854vw;
  height: 1.75vh;
  top: 0.31vh;
  border-radius: 52.08vw;
  background: rgba(255, 255, 255, 1);
  border: 0.00521vw solid rgba(13, 127, 233, 1);
  font-size: 0.625vw;
  font-weight: 500;
  color: rgba(13, 127, 233, 1);
  line-height: 1.75vh;
  text-align: center;
  vertical-align: middle;
}
.money{
  position: relative;
  font-size: 0.9375vw;
  font-weight: 500;
  color: rgba(238, 113, 62, 1);
  vertical-align: middle;
  margin-left: 0.4167vw;
  line-height: 2.6vh;
}
.money-discuss{
  position: relative;
  width: 1.9vh;
  height: 1.75vh;
  top: 0.3vh;
  line-height: 1.75vh;
  border-radius: 0.21vw;
  border: 0.00521vw solid rgba(238, 113, 62, 1);
  font-size: 0.625vw;
  color: rgba(238, 113, 62, 1);
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}
.person-name{
  position: absolute;
  left: 3.125vw;
  top: 12.037vh;
  font-size: 0.729vw;
  font-weight: 400;
  color: rgba(32, 32, 32, 1);
}
.person-avatar{
  position: absolute;
  left: 1.3vw;
  top: 11.852vh;
  width: 1.25vw;
  height: 1.25vw;
  border-radius: 50%;
}
.decorate3{
  position: absolute;
  left: 17.917vw;
  top: 12.22vh;
  height: 1.48vh;
}
.person-city{
  position: absolute;
  left: 18.854vw;
  top: 12.13vh;
  font-size: 0.625vw;
  color: rgba(102, 102, 102, 1);
}
.tag-box{
  position: absolute;
  top: 6.35vh;
  left: 1.25vw;
  width: 20.885vw;
  height: 2.037vh;
  display: flex;
  align-items: center;
  gap: 0 0.833vw;
}
.tag{
  top: 0;
  width: 4.383vw;
  height: 2.037vh;
  border-radius: 6.5625vw;
  background: rgba(255, 255, 255, 1);
  border: 0.0621vw solid rgba(153, 153, 153, 1);
  font-size: 0.625vw;
  line-height: 2.037vh;
  color: rgba(102, 102, 102, 1);
}
.more-btn{
  position: absolute;
  left: 44.375vw;
  top: 132.7vh;
  width: 11.25vw;
  height: 4.44vh;
  border-radius: 5.21vw;
  border: none;
  background: linear-gradient(214.9deg, rgba(0, 95, 204, 1) 0%, rgba(14, 127, 232, 1) 100%);
  font-size: 0.9375vw;
  font-weight: 500;
  letter-spacing: 0.10417vw;
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
}

input:focus{
  outline: none;
}
</style>
